<template>
    <div class="top">
        <el-button type="primary" size="small" @click="open()">
            <el-icon>
                <Edit />
            </el-icon>
            &nbsp;
            新增
        </el-button>
    </div>
    <el-table :data="typeData" border style="width: 100%" stripe>
        <el-table-column label="序号" width="80" align="center">
            <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="通知类型" align="center" />
        <el-table-column label="属性" align="center">
            <template #default="scope">{{ scope.row.attribute == 0 ? '内置' : '自定义' }}</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
            <template #default="scope">
                <el-row>
                    <el-tag size="small" color="white" @click="change(scope.row.state, scope.row.id)">
                        {{ scope.row.state == 0 ? '停用' : '启用' }}
                    </el-tag>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template #default="scope">
                <div class="box" v-if="scope.row.attribute == 0">
                    -
                </div>
                <div class="box" v-if="scope.row.attribute == 1">
                    <el-row>
                        <el-tag size="small" color="white" @click="change(scope.row.state, scope.row.id)">
                            {{ scope.row.state == 1 ? '停用' : '启用' }}
                        </el-tag>
                        <el-tag size="small" color="white" @click="compose(scope.row)">{{ '编辑'
                        }}</el-tag>
                        <el-tag size="small" color="white" @click="remove(scope.row.id)">{{
                            '删除' }}</el-tag>
                    </el-row>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- 弹出层 -->
    <el-dialog v-model="centerDialogVisible" title="编辑类型" width="30%" align-center>
        <!-- <span>添加内容数据</span> -->
        <el-form label-position="right" label-width="100px" v-model="form" style="max-width: 460px">
            <el-form-item label="类型名称:">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="类型属性:">
                <el-select v-model="form.attribute" placeholder="请选择">
                    <el-option label="内置" :value="0" />
                    <el-option label="自定义" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="类型状态:">
                <el-select v-model="form.state" placeholder="请选择">
                    <el-option label="启用" value="1" />
                    <el-option label="停用" value="0" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="add(form)">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <div class="jump">
        <el-pagination layout="prev, pager, next" background :total="page * 10" @current-change="handleCurrentChange" />
        <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
        <span>跳至</span>
        <el-input v-model="input" />
        <span>页</span>
        <el-button @click="jump">确定</el-button>
        <el-select v-model="select" placeholder="10页/条" style="width: 115px">
            <el-option label="5页/条" value="5" @click="fn" />
            <el-option label="7页/条" value="7" @click="fn" />
            <el-option label="8页/条" value="8" @click="fn" />
        </el-select>
    </div>
</template>

<script   setup lang="ts">
import service from "@/api"
import { ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';

import 'element-plus/es/components/notification/style/css'
const typeData: any = ref([])
const centerDialogVisible = ref(false)
const input: any = ref('')
const select: any = ref('')
const cp: any = ref(1)
const ps: any = ref(6)
const form: any = ref({
    name: '',
    attribute: '',
    state: '',
})
function open() {
    centerDialogVisible.value = true
    form.value = {}
}
//总共页数
const page: any = ref('')
//一页多少条数据
const fn = async () => {
    ps.value = select.value
    let res = await service.informType.getInformTypeByPage({ cp: cp.value, ps: ps.value })
    if (res.data.code == 200) {
        typeData.value = res.data.data.date
        page.value = res.data.data.page.pages
    }
}
const handleCurrentChange = async (val: any) => {
    cp.value = val
    let res = await service.informType.getInformTypeByPage({ cp: cp.value, ps: ps.value })
    if (res.data.code == 200) {
        typeData.value = res.data.data.date
        page.value = res.data.data.page.pages
    }
}
async function jump() {
    if (input.value > page.value) {
        ElNotification.success({ message: '请输入正确页数' });
        input.value = ''
        return
    }
    let res = await service.informType.getInformTypeByPage({ cp: input.value, ps: ps.value })
    input.value = ''
    // console.log(res.data.data);
    if (res.data.code == 200) {
        typeData.value = res.data.data.date
        page.value = res.data.data.page.pages
    }
}
//获取数据
onMounted(async () => {
    let res = await service.informType.getInformTypeByPage({ cp: cp.value, ps: ps.value })
    if (res.data.code == 200) {
        typeData.value = res.data.data.date
        page.value = res.data.data.page.pages
    }
})
async function change(value: any, id: any) {
    if (value == 1) {
        let res = await service.informType.deactivate(id)
        if (res.data.code == 200) {
            ElNotification.success({ message: '停用成功' });
            typeData.value.find((item: any) => item.id == id).state = 0;
        }
    }
    if (value == 0) {
        let res = await service.informType.enable(id)
        if (res.data.code == 200) {
            ElNotification.success({ message: '开启成功' })
            typeData.value.find((item: any) => item.id == id).state = 1
        }
    }
}
//增加
async function add(ele: any) {
    centerDialogVisible.value = false
    if (ele.id) {
        let res = await service.informType.updateInformType(ele)
        if (res.data.code == 200) {
            ElNotification.success({ message: '编辑成功' });
            let res = await service.informType.getInformTypeByPage({ cp: cp.value, ps: ps.value })
            if (res.data.code == 200) {
                typeData.value = res.data.data.date
                page.value = res.data.data.page.pages
            }
        }
    } else {
        let res = await service.informType.saveInformType(form.value)
        if (res.data.code == 200) {
            ElNotification.success({ message: '添加成功' });
            let res = await service.informType.getInformTypeByPage({ cp: cp.value, ps: ps.value })
            if (res.data.code == 200) {
                typeData.value = res.data.data.date
                page.value = res.data.data.page.pages
            }

        }
    }
}
//关闭
function close() {
    centerDialogVisible.value = false
    form.value = {
        name: '', attribute: '', state: ''
    }
}
//修改
function compose(ele: any) {
    centerDialogVisible.value = true
    form.value = JSON.parse(JSON.stringify(ele))
}
//删除
async function remove(ele: any) {
    let res = await service.informType.deleteInformType(ele)
    if (res.data.code == 200) {
        ElNotification.success({ message: '删除成功' });
        typeData.value = typeData.value.filter((item: any) => item.id != ele)
    }
}
</script>

<style scoped>
.top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.el-tag {
    border: none;
    cursor: pointer;
}

.el-row {
    justify-content: center;
}

.jump {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    right: 0;
    bottom: 70px;
}

.jump .el-input {
    width: 5%;
}

.jump span,
.jump .el-select {
    margin: 0px 10px;
}
</style>
